<template>
	<view class="index">
		<u-navbar title-color="#fff" :isBack="false" back-icon-color="#ffffff" :is-fixed="true" height="60" :back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<view class="map-wrap" @click="changAddress">
					<u-icon name="map" color="#000000" size="24"></u-icon>
					<text class="address">{{address}}</text>
				</view>
				<view class="search-wrap">
					<u-search margin="0upx 25upx" v-model="keyword" :show-action="false" height="65" :action-style="{color: '#fff'}"
					 @change="searchHander"></u-search>
				</view>
				<view class="navbar-right">
					<view class="u-demo-area">
						<u-avatar :size="60" :src="userInfo.userUrl"></u-avatar>
					</view>
				</view>
			</view>
		</u-navbar>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="80%">
			<img-slide :imgSlideData="imgSlideData"></img-slide>
			<view class="center-tab">
				<view class="tab" v-for="(item, index) in tabList" :key="index" :class="tabIndex==index?'action':''" @click="toTabHander(index)">{{ item }}</view>
			</view>
			<view class="info-body">
				<block v-for="(item,index) in infoList">
					<info-item :infoData="item"></info-item>
				</block>
			</view>
		</mescroll-body>

		<tab-bar :pagePath="'/pages/index/index'"></tab-bar>
	</view>
</template>

<script>
	import imgSlide from '../../components/imgSlide.vue';
	import infoItem from '../../components/info-item.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			imgSlide,
			infoItem
		},
		data() {
			return {
				keyword: '',
				tabList: ['领养', '寻宠', '救助', '领养', '小事'],
				tabIndex: 0,
				imgSlideData: [],
				infoList: [],
				address: ''
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll()
			})
		},
		methods: {
			changAddress() {
				this.$comm.navigateTo("/pages/selectCity/selectCity")
			},
			getSwiperList() {
				this.$api.getSwiperList().then(res => {
					this.imgSlideData = res.data
				})
			},
			toTabHander(index) {
				this.tabIndex = index
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(mescroll) {
				this.$api.getInfoList({
					page: mescroll.num,
					limit: mescroll.size,
					infoTitle: this.keyword
				}).then(res => {
					if (res.code) {
						if (mescroll.num == 1) {
							this.infoList = res.data
						} else {
							this.infoList = this.infoList.concat(res.data)
						}
						mescroll.endSuccess(res.data.length, res.data.length >= mescroll.size);
					}
				}).catch(() => {
					mescroll.endErr();
				})
			},
			searchHander() {
				this.mescroll.resetUpScroll()
			}
		},
		onLoad() {
			this.address = this.get_address
			this.getSwiperList()
			uni.$on('emit', res => {
				this.address = res
				this.$store.dispatch('setUserInfoAddress', this.address)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.info-body {
		margin: 0upx 20upx;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.address {
		margin-left: 3upx;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		margin: 0upx 20upx 0upx 50upx;
	}

	.center-tab {
		width: 710rpx;
		height: 100rpx;
		margin: 20rpx 20rpx 45rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.tab {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #ffffff;
		background-color: $indexColor;
		display: flex;
		align-items: center;
		justify-content: center;

		&.action {
			background-color: $tabAction;
		}
	}
</style>
